<div class="menu-top" with-role="ROLE_UI_NAV" id="menu-toggle" ng-click="toggleMenu()">
  <nav id="roll-up-menu">
    <div id="nav-container" ng-controller="NavCtrl">
      <a admin-ng-href-role="{'ROLE_UI_EVENTS_VIEW': '#!/events/events',
                              'ROLE_UI_SERIES_VIEW': '#!/events/series'}"
         ng-class="{ active: category == 'events' }"
         with-role="ROLE_UI_NAV_RECORDINGS_VIEW">
        <i class="events" title="{{ 'NAV.EVENTS.TITLE' | translate }}"></i>
      </a>
      <a admin-ng-href-role="{'ROLE_UI_LOCATIONS_VIEW': '#!/recordings/recordings'}"
         ng-class="{ active: category == 'recordings' }"
         with-role="ROLE_UI_NAV_CAPTURE_VIEW">
        <i class="recordings" title="{{ 'NAV.CAPTUREAGENTS.TITLE' | translate }}"></i>
      </a>
      <a admin-ng-href-role="{'ROLE_UI_JOBS_VIEW': '#!/systems/jobs',
                              'ROLE_UI_SERVERS_VIEW': '#!/systems/servers',
                              'ROLE_UI_SERVICES_VIEW': '#!/systems/services'}"
         ng-class="{ active: category == 'systems' }"
         with-role="ROLE_UI_NAV_SYSTEMS_VIEW">
        <i class="systems" title="{{ 'NAV.SYSTEMS.TITLE' | translate }}"></i>
      </a>
      <a admin-ng-href-role="{'ROLE_UI_USERS_VIEW': '#!/users/users',
                              'ROLE_UI_GROUPS_VIEW': '#!/users/groups',
                              'ROLE_UI_ACLS_VIEW': '#!/users/acls'}"
         ng-class="{ active: category == 'users' }"
         with-role="ROLE_UI_NAV_ORGANIZATION_VIEW">
        <i class="users" title="{{ 'NAV.USERS.TITLE' | translate }}"></i>
      </a>
      <a admin-ng-href-role="{'ROLE_UI_THEMES_VIEW': '#!/configuration/themes'}"
         ng-class="{ active: category == 'configuration' }"
         with-role="ROLE_UI_NAV_CONFIGURATION_VIEW">
        <i class="configuration" title="{{ 'NAV.CONFIGURATION.TITLE' | translate }}"></i>
      </a>
      <a admin-ng-href-role="{'ROLE_UI_STATISTICS_ORGANIZATION_VIEW': '#!/statistics/organization'}"
         ng-class="{ active: category == 'statistics' }"
         with-role="ROLE_UI_NAV_STATISTICS_VIEW"
         ng-if="hasStatisticsProviders">
        <i class="statistics" data-title="{{ 'NAV.STATISTICS.TITLE' | translate }}"></i>
      </a>
    </div>
  </nav>
</div>
